<!--
 * @Author: 偻儸小卒[EdisonLiu_]
 * @Date: 1970-01-01 08:00:00
 * @LastEditors: 偻儸小卒[EdisonLiu_]
 * @LastEditTime: 2020-04-13 13:28:29
 * @Description: 首页
 -->
<template>
  <commonPage :showHeader="true" :header_title="header_title">
    <div class="page_body" slot="page_body">
      <van-skeleton
        :row="4"
        :loading="show_loading"
        
        class="query_result"
        :class="show_loading?'show_loading':''"
      >
        <div v-if="status != 1" class="not_query">
          <van-icon name="warning-o" class="icon" />
          <div v-if="status == 0">
            <div>未查询到成绩信息</div>
            <div>过一段时间再来吧！</div>
          </div>
          <div v-if="status == -1">
            <div>参考证号与姓名不匹配！</div>
          </div>
        </div>
        <div v-if="status == 1">
          <group class="query_group">
            <cell>
              <div slot="after-title" class="cell_title">姓名</div>
              <span class="cell_value" style="">{{ score.realname }}</span>
            </cell>
            <cell>
              <div slot="after-title" class="cell_title">参赛证号</div>
              <span class="cell_value">{{ score.identification_number }}</span>
            </cell>
          </group>
          <group class="query_group">
            <cell>
              <div slot="after-title" class="cell_title">赛事名称</div>
              <div slot="inline-desc" class="match_name">
                {{ score.match_title }}
              </div>
            </cell>
            <cell>
              <div slot="after-title" class="cell_title">奖项</div>
              <span class="cell_value">{{ score.reward }}</span>
            </cell>
            <cell>
              <div slot="after-title" class="cell_title">分数</div>
              <span class="cell_value">{{ score.fraction }}</span>
            </cell>
          </group>
        </div>
      </van-skeleton>
    </div>
  </commonPage>
</template>
<script>
import commonPage from "../common/commonPage";
import Vue from "vue";
import { Icon, Skeleton } from "vant";
Vue.use(Icon);
Vue.use(Skeleton);

export default {
  name: "score",
  data() {
    return {
      header_title: "成绩查询",
      status: 1,
      show_loading: true,
      title1: "",
      aaab: "",
      list1: [["小米", "iPhone", "华为", "情怀", "三星", "其他", "不告诉你"]],
      value1: ["请选择赛事活动名称"],
      query_data: {},
      score: {
        realname: "",
        identification_number: "",
        match_title: "",
        reward: "",
        fraction: ""
      }
    };
  },
  components: {
    commonPage
  },
  created() {
    this.query_data.match_id = this.$route.query.match_id;
    this.query_data.admission_ticket = this.$route.query.admission_ticket;
    this.query_data.realname = this.$route.query.realname;
    this.getScore();
    this.$wxShare(
      {
        title: "分享标题", // 分享标题
        desc: "分享描述", // 分享描述
        link: window.location.href // 分享链接
        //   debug:true
      },
      function() {
        //分享成功后的回调函数
      }
    );
  },
  methods: {
    getScore(init = 0) {
      let that = this;
      console.log(that.query_data);
      let obj = this.$axios({
        url: "score.getScore",
        method: "post",
        data: that.query_data
      });

      if (init == 1) {
        return obj;
      } else {
        obj
          .then(res => {
            that.status = res.status;
            if (res.status == 1) {
              that.score = res.result.score;
              switch (res.result.score.reward) {
                case 1:
                  that.score.reward = "一等奖";
                  break;
                case 2:
                  that.score.reward = "二等奖";
                  break;
                case 3:
                  that.score.reward = "三等奖";
                  break;
                case 4:
                  that.score.reward = "优秀奖";
                  break;
                default:
                  break;
              }
            }
            that.show_loading=false;
          })
          .catch(error => {
            console.log(error);
          });
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.page_body {
  height: 100%;

  .query_result {
    background: white;
    height: 100%;
    padding: 0 4%;
    &.show_loading{
      padding-top :1rem;
    }
  }

  .not_query {
    height: 100%;
    min-height: 300px;
    padding-top: 20%;
    width: 100%;
    text-align: center;

    .icon {
      font-size: 5rem;
      color: red;
      margin-bottom: 3rem;
    }

    div {
      font-size: 1rem;
      color: #666;
    }
  }

  div {
    font-size: 0.7rem;

    input {
      font-size: 0.7rem;
    }

    li {
      list-style: none;
      width: calc(100% - 1rem);
      position: relative;
      margin-top: 1.2rem;

      .input_text {
        width: 100%;
        height: 100%;
        border-radius: 10rem;
        height: 3rem;
        line-height: 3rem;
        border: 0;
        padding-left: 1rem;
        background: #fff;
      }

      .input_botton {
        width: calc(100% + 1rem);
        border-radius: 10rem;
        border: 0;
        color: white;
        height: 3rem;
        line-height: 3rem;
        background: #33f;
      }

      .icon {
        position: absolute;
        top: 0.6rem;
        right: 0rem;
        z-index: 10000;
      }
    }
  }
}

.query_group {
  .cell_title {
    color: #7e7e7e;
  }

  .cell_value {
    color: #4c4c4c;
  }

  .match_name {
    color: #4661d6;
    font-size: 0.8rem;
    font-weight: 900;
    margin-top: 0.5rem;
  }
}
</style>
<style lang="stylus" >
.query_group {
  >div {
    background: white;
    border-radius: 0.5rem;

    &:before {
      content: none;
    }
  }
}

.input_text .weui-cell {
  padding: 0;

  .weui-cell__ft:after {
    content: none;
  }
}
</style>
